<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toast 轻提示演示</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            padding: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .demo-container {
            background: white;
            border-radius: 16px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 600px;
            width: 100%;
        }

        h1 {
            margin: 0 0 12px 0;
            color: #1a202c;
            font-size: 28px;
        }

        p {
            margin: 0 0 32px 0;
            color: #718096;
            font-size: 14px;
        }

        .button-group {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }

        button {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            color: white;
        }

        .btn-success {
            background: #10b981;
        }

        .btn-success:hover {
            background: #059669;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
        }

        .btn-error {
            background: #ef4444;
        }

        .btn-error:hover {
            background: #dc2626;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
        }

        .btn-warning {
            background: #f59e0b;
        }

        .btn-warning:hover {
            background: #d97706;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
        }

        .btn-info {
            background: #3b82f6;
        }

        .btn-info:hover {
            background: #2563eb;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
        }

        .btn-confirm {
            background: #8b5cf6;
            grid-column: span 2;
        }

        .btn-confirm:hover {
            background: #7c3aed;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
        }

        .divider {
            height: 1px;
            background: #e5e7eb;
            margin: 32px 0;
        }

        .feature-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .feature-list li {
            padding: 8px 0;
            color: #4b5563;
            font-size: 14px;
            display: flex;
            align-items: center;
        }

        .feature-list li::before {
            content: '✓';
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #10b981;
            color: white;
            font-weight: bold;
            font-size: 12px;
            margin-right: 12px;
        }
    </style>
</head>

<body>
    <div class="demo-container">
        <h1>🎉 Toast 轻提示演示</h1>
        <p>替代原生的 alert 和 confirm，提供更优雅的用户体验</p>

        <div class="button-group">
            <button class="btn-success" onclick="showSuccess()">✓ 成功提示</button>
            <button class="btn-error" onclick="showError()">✕ 错误提示</button>
            <button class="btn-warning" onclick="showWarning()">⚠ 警告提示</button>
            <button class="btn-info" onclick="showInfo()">ℹ 信息提示</button>
            <button class="btn-confirm" onclick="showConfirm()">🗑️ 删除确认对话框</button>
        </div>

        <div class="divider"></div>

        <ul class="feature-list">
            <li>自动消失，无需手动关闭</li>
            <li>支持多个提示同时显示</li>
            <li>优雅的动画效果</li>
            <li>确认对话框支持遮罩层点击关闭</li>
            <li>完美替代原生 alert 和 confirm</li>
        </ul>
    </div>

    <script type="module">
        // 复制 toast.ts 的代码
        class ToastManager {
            container = null;

            ensureContainer() {
                if (!this.container) {
                    this.container = document.createElement('div');
                    this.container.className = 'toast-container';
                    this.container.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
          `;
                    document.body.appendChild(this.container);
                }
                return this.container;
            }

            show(message, options = {}) {
                const { duration = 3000, type = 'info', onClose } = options;
                const container = this.ensureContainer();

                const toast = document.createElement('div');
                toast.className = `toast toast-${type}`;

                const colors = {
                    success: '#10b981',
                    error: '#ef4444',
                    warning: '#f59e0b',
                    info: '#3b82f6',
                };

                toast.style.cssText = `
          background: white;
          padding: 12px 20px;
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          border-left: 4px solid ${colors[type]};
          min-width: 250px;
          max-width: 400px;
          pointer-events: auto;
          animation: slideIn 0.3s ease-out;
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 14px;
          color: #333;
        `;

                const icons = {
                    success: '✓',
                    error: '✕',
                    warning: '⚠',
                    info: 'ℹ',
                };

                toast.innerHTML = `
          <span style="
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: ${colors[type]};
            color: white;
            font-weight: bold;
            font-size: 12px;
          ">${icons[type]}</span>
          <span style="flex: 1;">${message}</span>
        `;

                container.appendChild(toast);

                if (!document.getElementById('toast-animations')) {
                    const style = document.createElement('style');
                    style.id = 'toast-animations';
                    style.textContent = `
            @keyframes slideIn {
              from {
                transform: translateX(100%);
                opacity: 0;
              }
              to {
                transform: translateX(0);
                opacity: 1;
              }
            }
            @keyframes slideOut {
              from {
                transform: translateX(0);
                opacity: 1;
              }
              to {
                transform: translateX(100%);
                opacity: 0;
              }
            }
          `;
                    document.head.appendChild(style);
                }

                setTimeout(() => {
                    toast.style.animation = 'slideOut 0.3s ease-out';
                    setTimeout(() => {
                        container.removeChild(toast);
                        onClose?.();
                        if (container.children.length === 0) {
                            document.body.removeChild(container);
                            this.container = null;
                        }
                    }, 300);
                }, duration);
            }

            success(message, duration) {
                this.show(message, { type: 'success', duration });
            }

            error(message, duration) {
                this.show(message, { type: 'error', duration });
            }

            warning(message, duration) {
                this.show(message, { type: 'warning', duration });
            }

            info(message, duration) {
                this.show(message, { type: 'info', duration });
            }

            confirm(options) {
                const {
                    title = '确认操作',
                    message,
                    confirmText = '确定',
                    cancelText = '取消',
                    onConfirm,
                    onCancel,
                } = options;

                const overlay = document.createElement('div');
                overlay.style.cssText = `
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          z-index: 9999;
          display: flex;
          align-items: center;
          justify-content: center;
          animation: fadeIn 0.2s ease-out;
        `;

                const modal = document.createElement('div');
                modal.style.cssText = `
          background: white;
          border-radius: 12px;
          padding: 24px;
          min-width: 320px;
          max-width: 480px;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
          animation: scaleIn 0.2s ease-out;
        `;

                modal.innerHTML = `
          <h3 style="margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: #333;">${title}</h3>
          <p style="margin: 0 0 24px 0; font-size: 14px; color: #666; line-height: 1.6;">${message}</p>
          <div style="display: flex; gap: 12px; justify-content: flex-end;">
            <button class="toast-cancel-btn" style="
              padding: 8px 20px;
              border: 1px solid #d1d5db;
              background: white;
              border-radius: 6px;
              cursor: pointer;
              font-size: 14px;
              color: #666;
              transition: all 0.2s;
            ">${cancelText}</button>
            <button class="toast-confirm-btn" style="
              padding: 8px 20px;
              border: none;
              background: #ef4444;
              color: white;
              border-radius: 6px;
              cursor: pointer;
              font-size: 14px;
              font-weight: 500;
              transition: all 0.2s;
            ">${confirmText}</button>
          </div>
        `;

                if (!document.getElementById('modal-animations')) {
                    const style = document.createElement('style');
                    style.id = 'modal-animations';
                    style.textContent = `
            @keyframes fadeIn {
              from { opacity: 0; }
              to { opacity: 1; }
            }
            @keyframes scaleIn {
              from {
                transform: scale(0.9);
                opacity: 0;
              }
              to {
                transform: scale(1);
                opacity: 1;
              }
            }
            .toast-cancel-btn:hover {
              background: #f3f4f6 !important;
            }
            .toast-confirm-btn:hover {
              background: #dc2626 !important;
            }
          `;
                    document.head.appendChild(style);
                }

                const close = () => {
                    overlay.style.animation = 'fadeIn 0.2s ease-out reverse';
                    setTimeout(() => {
                        document.body.removeChild(overlay);
                    }, 200);
                };

                const cancelBtn = modal.querySelector('.toast-cancel-btn');
                const confirmBtn = modal.querySelector('.toast-confirm-btn');

                cancelBtn.addEventListener('click', () => {
                    close();
                    onCancel?.();
                });

                confirmBtn.addEventListener('click', () => {
                    close();
                    onConfirm();
                });

                overlay.addEventListener('click', (e) => {
                    if (e.target === overlay) {
                        close();
                        onCancel?.();
                    }
                });

                overlay.appendChild(modal);
                document.body.appendChild(overlay);
            }
        }

        window.toast = new ToastManager();

        window.showSuccess = () => {
            toast.success('班次更新成功！');
        };

        window.showError = () => {
            toast.error('保存失败，请检查服务器是否正常运行');
        };

        window.showWarning = () => {
            toast.warning('请注意：该员工已连续工作7天');
        };

        window.showInfo = () => {
            toast.info('数据加载完成，共80名员工');
        };

        window.showConfirm = () => {
            toast.confirm({
                title: '确认删除',
                message: '确定要删除这个班次吗？此操作无法撤销。',
                confirmText: '删除',
                cancelText: '取消',
                onConfirm: () => {
                    toast.success('班次删除成功');
                },
                onCancel: () => {
                    toast.info('已取消删除操作');
                },
            });
        };
    </script>
</body>

</html>
